<script lang="ts" setup>
import { get, post, Message, loadFile, message } from '@/utils'
import { FormInstance } from '@arco-design/web-vue'
import Upload from '@/components/upload/index.vue'
import isEmpty from 'lodash/isEmpty'
const formRef = ref({} as FormInstance)
const props = defineProps<{
  show: boolean
  id: number | string
  edit?: boolean
  info?: Classify
}>()
const emit = defineEmits(['update:show', 'confirm'])
const detail = reactive({
  name: '',
  sort: 0,
  parentId: '',
  level: 1,
  icon: '',
  status: 1,
})

const submit = done => {
  formRef.value.validate(err => {
    if (!err) {
      const query = Object.assign({}, detail)
      query.parentId = query.parentId || '0'
      post({ url: '/server-shop/sys-seller/seller/goods/category/submit', data: query }, ({ code }) => {
        done(code == 200)
        if (code == 200) {
          emit('update:show', false)
          emit('confirm')
        }
      })
    } else done(false)
  })
}
const getInfo = () => {
  Object.assign(detail, props.info)
}
onMounted(() => {
  if (!isEmpty(props.info)) getInfo()
})
</script>
<template>
  <CModal v-model:visible="props.show" @before-ok="submit" :mask-closable="false" @cancel="emit('update:show', false)" :title="isEmpty(props.info) ? '新增' : '编辑'">
    <div class="content">
      <a-form :model="detail" layout="vertical" ref="formRef">
        <a-form-item label="分类图片" tooltip="图片尺寸125 * 84">
          <Upload :list="detail.icon" v-model:value="detail.icon" :limit="1" />
        </a-form-item>
        <a-form-item field="name" label="分类名称" :rules="[{ required: true, message: '请输入分类名称' }]" :validate-trigger="['change', 'blur']">
          <a-input v-model="detail.name" placeholder="请输入分类名称" />
        </a-form-item>

        <a-form-item field="sort" label="排序" :rules="[{ required: true, message: '请输入排序' }]" :validate-trigger="['change', 'blur']">
          <a-input-number :min="0" v-model="detail.sort" placeholder="请输入排序" />
        </a-form-item>
        <a-form-item field="status" label="状态" :rules="[{ required: true, message: '请选择状态' }]" :validate-trigger="['change', 'blur']">
          <a-radio-group
            v-model="detail.status"
            :options="[
              {
                label: '开启',
                value: 1,
              },
              {
                label: '关闭',
                value: 0,
              },
            ]"
          />
        </a-form-item>
      </a-form>
    </div>
  </CModal>
</template>
<style lang="less" scoped>
.grid-2 {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
</style>
